<template>
    <div class="lzx_container">
        <div id="view3d"></div>
        <div id="side">
            <div class="title">
                <span>批注</span>
                <div class="btnForPZ">
                    <a href="javascript:void(0)" @click="createAnnotation">添加批注</a>
                </div>
            </div>
            <div class="contentForPZ" v-if="!isEdit">
                <ul class="annotationlist" style="max-height:calc(100% - 352px)">
                    <li
                        v-for="(item, i) in annotationlist"
                        @click="annotationGetImage(i, item)"
                        :title="item.name"
                        :class="{ on: item.isClick }"
                        :key="i"
                    >
                        <img :src="item.src" alt="" class="annotation-img" style="width:80px;height:60px" />
                        <div class="info">
                            <p class="name" v-if="item.name.length > 0">{{ item.comment }}</p>
                            <p class="name" v-else>-</p>
                            <p>{{ item.time }}</p>
                            <p>图名：{{ item.name }}</p>
                            <p>图号：{{ item.number }}</p>
                        </div>
                        <h3 style="color:red">答疑：</h3>
                            <el-input type="textarea" v-if="item.isClick" v-model="nowAnswer" @blur="handleAnswer(item.comment)"></el-input>
                    </li>
                </ul>
            </div>
            <div class="edit contentB" v-if="isEdit" :class="{ 'side-isedit': isEdit }">
                <div class="annotation-brief">
                    <p>图名：{{ this.nowName }}</p>
                    <p>图号：{{ this.nowNumber + 1 }}</p>
                </div>
                <textarea placeholder="添加批注描述" v-model="comment"></textarea>
                <a href="javascript:void(0)" @click="annotationSave">保存</a>
                <a href="javascript:void(0)" @click="annotationCancel">取消</a>
            </div>
        </div>
        <div class="mask" v-if="isView">
            <a href="javascript:void(0)" class="btn btn-exit" @click="maskExit">退出</a>
        </div>
    </div>
</template>


<script>

export default {
    data() {
        return {
            viewToken: '79d7157fea624e44a9b4e6ed15a7123e',
            isEdit: false,
            modelViewer: {
                toolbar: undefined, // 工具条
                annotationmanager: undefined, // annotation的绘制管理器
                annotationToolbar: undefined,
                annotationControl: null
            },
            annotationlist: [],
            nowName: 'nowName',
            nowNumber: 0,
            comment: '',
            isView: false,
            setListNew: [],
            nowAnswer:null
        };
    },
    mounted() {
        let me = this;
        me.setListNew = sessionStorage.getItem('answer');
        if (me.setListNew === null || me.setListNew === undefined) {
            me.setListNew = [];
        } else {
            me.setListNew = JSON.parse(me.setListNew);
        }
        //初始化列表
        me.defaultAnnotation();

        var options = new BimfaceSDKLoaderConfig();
        options.viewToken = me.viewToken;
        BimfaceSDKLoader.load(options, successCallback, failureCallback);

        function successCallback() {
            // 获取DOM元素
            var dom4Show = document.getElementById('view3d');
            var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
            webAppConfig.domElement = dom4Show;
            // 创建WebApplication
            window.app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
            // 添加待显示的模型
            app.addView(me.viewToken);

            // 监听添加view完成的事件
            app.addEventListener(Glodon.Bimface.Application.WebApplication3DEvent.ViewAdded, function() {
                // 渲染3D模型
                app.render();

                // 从WebApplication获取viewer3D对象
                window.viewer3D = app.getViewer();
                me.nowName = viewer3D.getAllModels()[0].modelName;
                // 配置annotationconfig
                window.annotationconfig = new Glodon.Bimface.Plugins.Annotation.AnnotationManagerConfig();
                // 把viewer3D注册到annotation绘制管理器
                annotationconfig.viewer = viewer3D;
                // annotation样式的配置
                annotationconfig.lineColor = new Glodon.Web.Graphics.Color(255, 0, 0, 1);
                annotationconfig.fillColor = new Glodon.Web.Graphics.Color(255, 255, 255, 0);
                annotationconfig.fontSize = 14;
                // 设置annotation的类型
                me.modelViewer.annotationManager = new Glodon.Bimface.Plugins.Annotation.AnnotationManager(annotationconfig);
            });
        }
        function failureCallback(error) {
            console.log(error);
        }
    },
    methods: {
         handleAnswer(value){
            var answer = JSON.parse(sessionStorage.getItem("answer"))
            for(let i=0;i<answer.length;i++){
                if(answer[i].comment===value){
                    answer[i].answer=this.nowAnswer
                    console.log(this.nowAnswer)
                }
            }
            console.log(answer)
            answer = JSON.stringify(answer)
            sessionStorage.setItem("answer",answer)
            this.nowAnswer = ''
        },
        defaultAnnotation() {
            let me = this;
            let sessionAnnotationlist = sessionStorage.getItem('annotationlist3D');
            if (sessionAnnotationlist) {
                me.annotationlist = JSON.parse(sessionAnnotationlist);
                for (let i = 0; i < me.annotationlist.length; i++) {
                    if ((i = me.annotationlist.length - 1)) me.nowNumber = me.annotationlist[me.annotationlist.length - 1].number;
                }
            }
        },
        createAnnotation() {
            let me = this;
            me.isEdit = true;
            var config = new Glodon.Bimface.Plugins.Annotation.AnnotationToolbarConfig();
            config.viewer = viewer3D;
            me.modelViewer.annotationToolbar = new Glodon.Bimface.Plugins.Annotation.AnnotationToolbar(config);
            me.modelViewer.annotationManager = me.modelViewer.annotationToolbar.getAnnotationManager();

            this.changeModel(1);
            me.modelViewer.annotationToolbar.show();
        },
        changeModel: function(num) {
            if (num == 0) {
                app.getToolbar('MainToolbar').show();
            } else {
                app.getToolbar('MainToolbar').hide();
            }
        },

        annotationSave: function() {
            var me = this;
            let _state = me.modelViewer.annotationManager.getCurrentState();
            console.log(_state);
            let list = me.modelViewer.annotationManager.getAnnotationList();
            me.modelViewer.annotationManager.setAnnotationList(list);
            if (_state.annotationList.length == 0) {
                const emptyObj = {
                    rotation: 0,
                    markupType: 'Cross',
                    drawPoints: [0, 0],
                    strokeStyle: 'rgba(0,0,0,0)',
                    lineWidth: 0,
                    bNeedHitByBbox: false,
                    drawEnd: true,
                    markupId: ''
                };
                _state.annotationList.push(emptyObj);
            }

            me.modelViewer.annotationManager.createSnapshot(function(data) {
                var date = new Date();
                var seperator1 = '-';
                var seperator2 = ':';
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                let currentdate =
                    date.getFullYear() +
                    seperator1 +
                    month +
                    seperator1 +
                    strDate +
                    ' ' +
                    date.getHours() +
                    seperator2 +
                    date.getMinutes() +
                    seperator2 +
                    date.getSeconds();
                let _img = data;
                var obj = {
                    time: currentdate,
                    src: _img,
                    state: _state,
                    isClick: false,
                    comment: me.comment,
                    name: me.nowName,
                    number: ++me.nowNumber
                };

                me.annotationlist.push(obj);
            });
            var newObj = {
                number: me.nowName + ' - ' + me.nowNumber,
                name: me.nowName,
                comment: me.comment,
                answer:'',
                result:''
            };
            me.setListNew.push(newObj);
            sessionStorage.setItem('answer', JSON.stringify(me.setListNew));
            me.comment = '';
            this.annotationCancel();
            sessionStorage.setItem('annotationlist3D', JSON.stringify(this.annotationlist));
        },
        annotationCancel: function() {
            this.isEdit = false;
            this.changeModel(0);
            this.modelViewer.annotationManager.endDrawing && this.modelViewer.annotationManager.endDrawing();

            document.querySelector('.bf-annotation').addClass('bf-hide');
            this.clearToolDom();
        },
        clearToolDom() {
            let markupVirtual = document.querySelector('#markupVirtual');
            if (markupVirtual) markupVirtual.parentNode.removeChild(markupVirtual);
            let control = document.querySelector('.bf-toolbar-control');
            if (control) control.parentNode.removeChild(control);
            let annotation = document.querySelector('.bf-annotation');
            if (annotation) annotation.parentNode.removeChild(annotation);
        },
        annotationGetImage: function(i, data) {
            const me = this;
            let image;
            if (!me.isEdit) {
                me.isView = true;
                me.clearListStyle();
                me.changeModel(1);
                data.isClick = true;
                me.modelViewer.annotationManager.setState(data.state);
                me.modelViewer.annotationManager.createSnapshot(function(snapshot) {
                    image = snapshot;
                    const copyList = me.annotationlist;
                    copyList[i].src = image;
                    me.annotationList = copyList;
                    const imgs = document.querySelectorAll('.annotation-img');
                    imgs[i].setAttribute('src', image);
                });
            }
        },
        clearListStyle: function() {
            for (let i = 0; i < this.annotationlist.length; i++) {
                this.annotationlist[i].isClick = false;
            }
        },

        maskExit: function() {
            this.isView = false;
            this.clearListStyle();
            this.changeModel(0);
            this.modelViewer.annotationManager.startDrawing();
            this.modelViewer.annotationManager.endDrawing();
        }
    }
};
</script>

<style scoped>
.lzx_container {
    display: flex;
    overflow: hidden;
    background-color: #fff;
}

#view3d {
    width: 82%;
    background-color: #d8e1ec;
    height: 83.333vh;
}

#side {
    width: 18%;
    height: 83.333vh;
    padding: 10px;
    box-sizing: border-box;
}

#side .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 6px;
    border-left: 4px solid #32d3a6;
    height: 24px;
    line-height: 24px;
}

#side .title span {
    font-weight: bold;
    font-size: 16px;
}

#side .title a {
    font-weight: bold;
    color: white;
    background-color: #11dab7;
    padding: 4px 8px;
    border-radius: 2px;
    text-decoration: none;
}
#side .contentForPZ {
    margin-top: 6px;
    border-top: 1px solid #ddd;
    min-height: 80vh;
    overflow: hidden;
}

.content {
    padding-right: 10px;
    overflow: hidden;
}

.annotationlist li {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    padding: 8px 10px 8px 100px;
    box-sizing: border-box;
    color: #999;
    border-left: 2px solid #eee;
    font-size: 12px;
    cursor: pointer;
}
.annotationlist li.on {
    height: auto;
    background-color: #e4fff7;
    border-left: 2px solid #11dab7;
}

.annotationlist li img {
    position: absolute;
    left: 10px;
    width: 80px;
    height: 50px;
    border: 1px solid #ddd;
    background-color: #fff;
}
.annotationlist li .name {
    color: #333;
    font-size: 14px;
    line-height: 20px;
}
.annotationlist li .info p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
}
.annotationlist li.on .info p {
    white-space: unset !important;
}
.edit {
    margin-top: 6px;
    border-top: 1px solid #ccc;
    padding: 10px 0;
    background-color: #fff;
}
.edit a {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    color: white;
    background-color: #11dab7;
    padding: 2px 8px;
    box-sizing: border-box;
    border-radius: 2px;
    text-decoration: none;
}
.annotation-brief {
    color: #999;
}
.annotation-brief p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    font-size: 14px;
    line-height: 24px;
}
.edit textarea {
    border: 1px solid #ddd;
    box-sizing: border-box;
    width: 100%;
    margin: 5px 0;
    height: 100px;
    resize: none;
    padding: 5px;
    font-size: 14px;
    outline: none;
}
.edit textarea:active {
    outline: #11dab7 !important;
}
a.btn {
    text-decoration: none !important;
    color: #11dab7;
}
.btn-exit {
    border: 1px solid #333;
    background-color: hsla(0, 0%, 7%, 0.88);
    position: absolute;
    left: 40%;
    bottom: 10px;
    transform: translate(-40%);
    padding: 10px 15px;
    width: 100px;
    text-align: center;
    color: #fff !important;
    z-index: 199;
}
</style>
